<template>
  <FilterGroup :tags="tags" :filters.sync="filters" @onCloseTag="handleCloseTag">
    <!-- <FilterItem :data-count="10" :data-obj="cityFilterData" :checked-nodes.sync="belongDistrict" /> -->
    <FilterItem :data-count="6" :data-obj="cqFilterData" :checked-nodes.sync="count" />
    <FilterItem :data-count="9" :data-obj="parkTypeFilterData" :checked-nodes.sync="type" />
    <FilterItem :data-obj="parkLevelFilterData" :checked-nodes.sync="level" />
    <FilterItem
      :data-count="9"
      :data-obj="parkEconomicTypeFilterData"
      :checked-nodes.sync="economicType"
    />
    <FilterItem
      :data-count="14"
      :data-obj="parkIndustryFilterData"
      :checked-nodes.sync="intendedIndustry"
    />
  </FilterGroup>
</template>

<script lang="ts">
import Vue from 'vue'
import { mapGetters } from 'vuex'
import FilterGroup from '@/components/portal/FilterGroup.vue'
import FilterItem from '@/components/portal/FilterItem.vue'
export default Vue.extend({
  components: { FilterItem, FilterGroup },
  props: {
    checked: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      // 所属区县字段临时使用count后去后台需要修改
      count: { label: '所在区县', checked: [] },
      belongDistrict: { label: '所在城市', checked: [] },
      type: { label: '园区类型', checked: [] },
      level: { label: '园区级别', checked: [] },
      economicType: { label: '经济类型', checked: [] },
      intendedIndustry: { label: '意向产业', checked: [] },
      filters: [],
    }
  },
  computed: {
    ...mapGetters('tree', ['city', 'industryLevel0', 'cqArea']),
    ...mapGetters('dictionary', ['codes']),
    cityFilterData() {
      return {
        label: '所在城市',
        key: 'belongDistrict',
        checked: [],
        filterNames: this.city,
      }
    },
    cqFilterData() {
      return {
        label: '所在区县',
        key: 'count',
        checked: [],
        filterNames: this.cqArea,
      }
    },
    parkTypeFilterData() {
      return {
        label: '园区类型',
        key: 'type',
        checked: [],
        filterNames: this.codes.park_type,
      }
    },
    parkLevelFilterData() {
      return {
        label: '园区级别',
        key: 'level',
        checked: [],
        filterNames: this.codes.park_level,
      }
    },
    parkEconomicTypeFilterData() {
      return {
        label: '经济类型',
        key: 'economicType',
        checked: [],
        filterNames: this.codes.park_economic_type,
      }
    },
    parkIndustryFilterData() {
      return {
        label: '意向产业',
        key: 'intendedIndustry',
        checked: [],
        filterNames: this.industryLevel0,
      }
    },
    tags: {
      get() {
        return [
          this.count,
          this.belongDistrict,
          this.type,
          this.level,
          this.economicType,
          this.intendedIndustry,
        ]
      },
    },
  },
  watch: {
    filters(val) {
      this.$emit('update:checked', val)
    },
  },
  methods: {
    handleCloseTag(tag) {
      console.log(tag)

      this[tag.key] = {
        label: tag.label,
        checked: [],
      }
    },
  },
})
</script>
<style lang="scss" scoped></style>
